MSDV CW2 Description

The visualsation uses the CSSE COVID-19 dataset, which consists of 420MB of cases, split across hundreds of files summarizing the data for a given day.
Within each file are a number of locations, each with a frequency of cases, hosptialisations, deaths and active cases. However to add further complextity each region uses a running total so cannot be viewed as a discrete time step. Accordingly I heavily preprocess this data in csse_merge.py.
I have exported the interactive python session into csse_merge.ipynb for easier viewing from vs code (If you wish to run the code, download the dataset from https://github.com/CSSEGISandData/COVID-19 and change the path). In summary, I first read the many CSV files and merged them into a single pandas dataframe. Then I combined duplicate columns as column names changed during the CSSE dataset. Next I round all latitudes and longitudes to integers, given the scale of the heatmap, this has very little impact on the visualisation, but greatly improves performance and means the heatmap is using a constant density, without this the heatmap would be invalid. Next I de-accumualte the data, which converts each time step into a discrete step, rather than an accumulation of all prior steps. Then I finally export the data into a JSON for my main web app.

Moving onto the visualisation itself, there are 3 main components the heatmap, circle tools and the multi-line graph

HeatMap

The heatmap is intended to show how the impact of COVID-19 varies globally. The heatmap consists uses a Winkel-Triple-Pojection to minimise distortion (https://cdn.jsdelivr.net/npm/d3-geo-projection@4). Each country is projected as an SVG region in grey to be visble but not draw attention. The hot-spots are then drawn on top of this map, each hot spot is formed using an circle with an expential gradient from the hotspot color to 100% transparency. This is done using code from https://github.com/mourner/simpleheat.

Circle Tools

The circle tools were developed from scratch using Konva, this took a while to develop as we had not covered it in the practicals. In the end I'm really happy with the results as the tools can be moved, resized added and deleted. The pixel locations used in the heatmap are used to select the corresponding data the circle is hovering over, enusuring the selection respects the distortions of the projection.

Multi-Line Graph

The multi-line graph is a refreshable graph using D3, intended to show how the impact of COVID-19 varies of time. The color of each trend matches the color of the circle tool used to produce it. The colors were chosen to be sufficiently different and limited to 5 channels as most people can only recongise 5 colors. As the user moves the circle tools the graph automatically updates, using smooth animations to prevent too much stimulation.

Omissions

I originally set out to include more features in my visualisation, but due to the unexpected time it took to pre-process the dataset, this was not possible. The first feature was a key that could be used to switch between showing deaths, hospitalisations, and total cases, currently the visualisationis limited to the number of cases. Secondly I hoped to add a time scale to greater zoom into the data and allow an animation of the heatmap over time as COVID-19 spread. Thridly, I had hoped to allow dynamic resizing of the window, rather than needing to refresh the page when the window size changes. Finally I had hoped to use the Oxford Covid-19 Government Response Tracker (OxCGRT) dataset to visualise Government intervention using marks on the multi-line graph.